<template>
    <div style="margin-bottom: 24px;">
        <TitleTips title="废置工程内容"></TitleTips>
        <el-form>
            <el-form-item label="废置工程内容" prop="detailList" required>
                <BaseButton plain @click="handleSelectProject">选择清单子目</BaseButton>
            </el-form-item>
        </el-form>
        <BaseTable :columns="columns" :data="tableList">
            <template #handle="{ scope: { $index } }">
                <BaseButton type="text" color="danger" @click="handleDelete($index)">移除</BaseButton>
            </template>
        </BaseTable>
        <div class="table-footer">
            合计： <span class="color-blue">￥{{ total }}</span>
        </div>

        <ProjectListDialog :id="id" ref="projectListDialog" @success="getTableList"></ProjectListDialog>
    </div>
</template>

<script>
import reconfirm from '@/utils/reconfirm'
import ProjectListDialog from '../../change-design/add/ProjectListDialog'
import BigNumber from 'bignumber.js'

export default {
    name: 'InventoryTable',
    components: {
        ProjectListDialog,
    },
    props: {
        id: {
            type: [Number, String],
            default: '' // 合同id
        },
    },
    data() {
        return {
            tableList: [],
            columns: Object.freeze([
                {
                    attrs: {
                        prop: 'number',
                        label: '序号',
                        width: '70',
                        type: 'index'
                    }
                },
                {
                    attrs: {
                        prop: 'listSubitemCode',
                        label: '清单子目编码',
                        'min-width': '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'listSubitemName',
                        label: '清单子目名称',
                        'min-width': '180',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'unitSymbol',
                        label: '单位',
                        width: '100',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'quantity',
                        label: '原设计数量',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'currentQuantity',
                        label: '当前数量',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'price',
                        label: '单价（元）',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'amount',
                        label: '金额（元）',
                        width: '150',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '140',
                        fixed: 'right'
                    }
                }
            ])
        }
    },
    computed: {
        total() {
            let total = 0
            this.tableList.forEach(item => {
                total = Number(new BigNumber(item.amount || 0).plus(total))
            })
            return total
        }
    },
    methods: {
        getTableList(data) {
            this.tableList.push(...data)
        },
        handleSelectProject() {
            const ids = this.tableList.map((item) => item.id)
            this.$refs['projectListDialog'].open(ids)
        },
        handleDelete(index) {
            reconfirm({
                isPromise: false,
                text: '是否删除当前数据',
                callback: () => {
                    this.tableList.splice(index, 1)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.required-start {
    color: #e50834;
    margin-right: 4px;
    font-style: normal;
}
.table-footer {
    background-color: #f6f6f6;
    padding: 8px 40px;
    text-align: right;
    font-size: 14px;
    margin-bottom: 24px;
}
</style>
